<template>
  <div>
    <div class="search-content">
      <Col class="panel content-header" :span="24">
      <div class="title-bar cf">
        <h5 class="fl">
          <span>
            <a href="javascript:void(0);" class="link" @click="backToLast">
              <i class="fa fa-angle-left" aria-hidden="true"></i>返回上一页</a>
            <span class="dashboard-card-sep">|</span>
            <span class="dashboard-card-name"><span>日电压详情</span></span>
          </span>
        </h5>
      </div>
      </Col>
    </div>
    <div>
      <Row>
        <Col span="24" v-if="showTimeRange" style="padding:10px;box-sizing:border-box;">
        <DatePicker :clearable="false" :options="options" v-model="timeDate" type="date" placeholder="请选择查询时间..." style="width: 220px" @on-change="onTimeChange"></DatePicker>
        </Col>
        <!-- 折线图 -->
        <Col span="24" class="panel map-panel" style="margin-bottom:15px;">
        <div style="width:100%;height:350px;" class="blank-chart">
          <div ref="chart" style="width: 100%;height: 100%;"></div>
        </div>
        </Col>
        <!-- 表格 -->
        <Col class="panel table-panel" :span="24" style="overflow-x: auto;margin-bottom: 20px;">
        <AnalTable :tableData="tableData" :tableStyle="{ width:'100%' }"></AnalTable>
        </Col>
      </Row>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex"
import AnalTable from "../AnalTable"
import { getNxVoltageDetail } from "@/api"
import mixin from "./mixin"

export default {
  mixins: [mixin],
  computed: { ...mapGetters(["color"]) },
  created() {
    const path = this.$route.path
    if (path.indexOf("ontime") > -1) {
      this.showTimeRange = false
    }
  },
  mounted() {
    this.initState()
  },
  components: { AnalTable },
  data: () => ({
    tableData: [],
    showTimeRange: true,
    echartInstence: null
  }),
  methods: {
    onTimeChange() {
      this.initState()
    },

    momentFormat(timesup) {
      return this.moment(timesup)
        .utc()
        .format("YYYY-MM-DD HH:mm:ss")
    },

    initState() {
      const vm = this,
        { id, name } = vm.$route.params,
        timeDate = vm.timeDate,
        date = vm.moment(timeDate).format("YYYY-MM-DD"),
        params = {
          deviceNo: id,
          date
        }
      vm.$nextTick(() => {
        const dom = vm.$refs.chart
        if (vm.echartInstence) {
          vm.echartInstence.clear()
        }
        vm.echartInstence = vm.echarts.init(dom)
        vm.echartInstence.showLoading({ text: "", color: "red" })
        getNxVoltageDetail(params).then(res => {
          const { data } = res
          if (res.code === 200 && JSON.stringify(data) !== "{}") {
            vm.printMap(data, name, date)
            try {
              vm.tableData = [
                {
                  key: "A相最大电压",
                  value: `${data.AVMaxVal}(V) (${vm.momentFormat(
                    data.AVMaxDate
                  )})`
                },
                {
                  key: "A相最小电压",
                  value: `${data.AVMinVal}(V) (${vm.momentFormat(
                    data.AVMinDate
                  )})`
                },
                {
                  key: "B相最大电压",
                  value: `${data.BVMaxVal}(V) (${vm.momentFormat(
                    data.BVMaxDate
                  )})`
                },
                {
                  key: "B相最小电压",
                  value: `${data.BVMinVal}(V) (${vm.momentFormat(
                    data.BVMinDate
                  )})`
                },
                {
                  key: "C相最大电压",
                  value: `${data.CVMaxVal}(V) (${vm.momentFormat(
                    data.CVMaxDate
                  )})`
                },
                {
                  key: "C相最小电压",
                  value: `${data.CVMinVal}(V) (${vm.momentFormat(
                    data.CVMinDate
                  )})`
                }
              ]
            } catch (e) {
              return false
            }
          } else {
            vm.echartInstence.setOption({
              title: {
                text: "暂无数据",
                textStyle: {
                  fontSize: 28,
                  fontWeight: "normal"
                },
                left: "center",
                top: "center"
              }
            })
            vm.echartInstence.hideLoading()
            vm.tableData = [
              {
                key: "A相最大电压",
                value: `-`
              },
              {
                key: "A相最小电压",
                value: `-`
              },
              {
                key: "B相最大电压",
                value: `-`
              },
              {
                key: "B相最小电压",
                value: `-`
              },
              {
                key: "C相最大电压",
                value: `-`
              },
              {
                key: "C相最小电压",
                value: `-`
              },
              {
                key: "零线最大电压",
                value: `-`
              },
              {
                key: "零线最小电压",
                value: `-`
              }
            ]
          }
        })
      })
    },

    printMap(data, name, date) {
      const vm = this,
        { CVList, BVList, AVList } = data,
        A = AVList.map(t => t.value),
        B = BVList.map(t => t.value),
        C = CVList.map(t => t.value),
        xRay = AVList.map(t => vm.moment(t.createdAt).utc().format("HH:mm:ss")),
        option = {
          title: {
            text: name,
            left: "center",
            subtext: date
          },
          color: [...vm.color],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985"
              }
            }
          },
          legend: {
            bottom: 0
          },
          grid: {
            top: "20%",
            left: "3%",
            right: "4%",
            bottom: "50"
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: xRay
          },
          yAxis: {
            name: "单位(A)",
            type: "value"
          },
          series: [
            {
              type: "line",
              name: "A相",
              data: A
            },
            {
              type: "line",
              name: "B相",
              data: B
            },
            {
              type: "line",
              name: "C相",
              data: C
            }
          ]
        }
      vm.echartInstence.setOption(option)
      vm.echartInstence.hideLoading()
    },

    backToLast() {
      this.$router.go(-1)
    }
  }
}
</script>
